<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="navBar">
        <div class="titleLeft">
            <a href="file:///E:/HTML/my_html/home.html" class="titleLink">开课吧首页</a>
            <a href="#" class="titleLink">创业微学院</a>
            <a href="#" class="titleLink">摄影微学院</a>
            <a href="#" class="titleLink">微聚</a>
            <a href="#" class="titleLink">论坛</a>
        </div>
        <div class="titleRight">
            <a href="#" class="titleLink">登录</a>
            <a href="file:///E:/HTML/my_html/register.html" class="titleLink">注册</a>
            <a href="#" class="titleLink">播放记录</a>
            <a href="#" class="titleLink">APP下载</a>
        </div>
    </div>

    <div class="navBar2">
        <div class="titleLeft">
            <a href="#" class="titleLink2">
                <span style="font-size: 30px;">摄影</span>
                <span style="font-size: medium;">·开课吧</span>
            </a>
            <a href="file:///E:/HTML/my_html/personal.html" class="titleLink2">
                个人中心
            </a>
            <a href="file:///E:/HTML/my_html/video.html" class="titleLink2">
                视频播放
            </a>
        </div>
        <div class="titleRight">
            <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-09-18 211743.png" width="50" height="50">
            <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-12-15 232056.png" width="50" height="50">
            <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-12-15 232057.png" width="50" height="50">
            <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-12-15 232058.png" width="50" height="50">
        </div>
    </div>


    <div class="personal">
        <!-- 头部区域 -->
        <div class="personal-header">
            <!-- 头像及个人信息 -->
            <div class="avatar-section">
                <img src="C:\Users\lorshine\Pictures\联想截图\联想截图_20240806225915.png" class="header-avatar">
                <div class="user-info">
                    <div class="nickname">摄影爱好者</div>
                    <div class="stats">
                        <span>视频数量:12</span>
                        <span>订阅粉丝数:258</span>
                    </div>
                </div>
            </div>

            <!-- 超链接导航 -->
            <div class="personal-nav">
                <a href="#" class="nav-item">个人中心</a>
                <a href="#" class="nav-item">播放记录</a>
                <a href="#" class="nav-item">我的收藏</a>
                <a href="#" class="nav-item">我的订阅</a>
                <a href="#" class="nav-item">我的视频</a>
            </div>
        </div>

        <!-- 身体部分 -->
        <div class="personal-body">
            <!-- 左边区域 -->
            <div class="body-left">
                <!-- 上部分最近播放视频 -->
                <div class="video-section">
                    <div class="section-title">
                        <span class="line"></span>
                        <span class="title-text">最近播放视频</span>
                        <span class="line"></span>
                    </div>
                    <div class="video-grid">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\21605333_175741758085_2.jpg"
                            class="video-thumb" alt="视频缩略图">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\30395639_143251621032_2.jpg"
                            class="video-thumb" alt="视频缩略图">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\1689317571293547.png" class="video-thumb"
                            alt="视频缩略图">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\21605333_175741758085_2.jpg"
                            class="video-thumb" alt="视频缩略图">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\30395639_143251621032_2.jpg"
                            class="video-thumb" alt="视频缩略图">
                        <img src="C:\Users\lorshine\Pictures\Camera Roll\1689317571293547.png" class="video-thumb"
                            alt="视频缩略图">
                    </div>
                </div>

                <!-- 下部分最近播放视频 -->
                <div class="video-section">
                    <div class="section-title">
                        <span class="line"></span>
                        <span class="title-text">最近播放视频</span>
                        <span class="line"></span>
                    </div>
                    <div class="video-grid">
                        <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2025-04-16 165147.png" class="video-thumb"
                            alt="视频缩略图">
                        <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2025-06-30 162017.png" class="video-thumb"
                            alt="视频缩略图">
                        <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-12-15 232056.png" class="video-thumb"
                            alt="视频缩略图">
                        <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2025-04-16 165147.png" class="video-thumb"
                            alt="视频缩略图">
                        <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2025-06-30 162017.png" class="video-thumb"
                            alt="视频缩略图">
                        <img src="C:\Users\lorshine\Pictures\Screenshots\屏幕截图 2024-12-15 232056.png" class="video-thumb"
                            alt="视频缩略图">
                    </div>
                </div>
            </div>

            <!-- 右边区域 -->
            <div class="body-right">
                <div class="subscribers-title">共订阅人数</div>
                <div class="subscribers-list">
                    <!-- 订阅人1 -->
                    <div class="subscriber-item">
                        <img src="C:\Users\lorshine\Pictures\联想截图\联想截图_20240806225915.png" class="sub-avatar"
                            alt="订阅人头像">
                        <div class="sub-info">
                            <div class="sub-name">旅行摄影</div>
                            <div class="sub-desc">粉丝9087 · 发布32个作品</div>
                        </div>
                    </div>
                    <!-- 订阅人2 -->
                    <div class="subscriber-item">
                        <img src="C:\Users\lorshine\Pictures\联想截图\联想截图_20240806225915.png" class="sub-avatar"
                            alt="订阅人头像">
                        <div class="sub-info">
                            <div class="sub-name">人像摄影技巧</div>
                            <div class="sub-desc">粉丝2880 · 发布56个作品</div>
                        </div>
                    </div>
                    <!-- 订阅人3 -->
                    <div class="subscriber-item">
                        <img src="C:\Users\lorshine\Pictures\联想截图\联想截图_20240806225915.png" class="sub-avatar"
                            alt="订阅人头像">
                        <div class="sub-info">
                            <div class="sub-name">街头摄影</div>
                            <div class="sub-desc">粉丝100 · 发布28个作品</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navBar">
        <p style=" text-align: center; font-size: 15px; font-weight: bold;background-color: #1990e5cb">LZZ@开课吧 版权所有</p>
    </div>


</body>

<style>
    @import url(style2.css);
</style>

</html>